<div class="color-0 pt-19px font-size-13">
    <div class="row label-config">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 quota-top">
            <div class="default-quota">
                <div>
                    <div class="default-quota-text">
                        <span class="width-10rem">{{
                            'QUOTA.PROJECT_QUOTA_DEFAULT_DISK' | translate
                        }}</span>
                        <span class="num-count"
                            >{{
                                quotaHardLimitValue?.storageLimit === -1
                                    ? ('QUOTA.UNLIMITED' | translate)
                                    : getIntegerAndUnit(
                                          quotaHardLimitValue?.storageLimit,
                                          0
                                      ).partNumberHard
                            }}
                            {{
                                quotaHardLimitValue?.storageLimit === -1
                                    ? ''
                                    : quotaHardLimitValue?.storageUnit
                            }}</span
                        >
                        <button
                            id="open-edit"
                            class="btn btn-link btn-sm default-quota-edit-button"
                            (click)="editDefaultQuota(quotaHardLimitValue)">
                            {{ 'QUOTA.EDIT' | translate }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <clr-datagrid
                [(clrDgSelected)]="selectedRow"
                [clrDgLoading]="loading"
                (clrDgRefresh)="getQuotaList($event)">
                <clr-dg-action-bar>
                    <div class="clr-row">
                        <div class="clr-col">
                            <button
                                type="button"
                                class="btn btn-secondary"
                                [disabled]="
                                    !(selectedRow && selectedRow.length === 1)
                                "
                                (click)="editQuota()">
                                {{ 'QUOTA.EDIT' | translate }}
                            </button>
                        </div>
                        <div class="clr-col">
                            <div class="clr-row search">
                                <hbr-filter
                                    [withDivider]="true"
                                    filterPlaceholder="{{
                                        'QUOTA.FILTER_PLACEHOLDER' | translate
                                    }}"
                                    (filterEvt)="doSearch($event)"></hbr-filter>
                                <span class="refresh-btn" (click)="refresh()">
                                    <clr-icon shape="refresh"></clr-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </clr-dg-action-bar>
                <clr-dg-column>{{ 'QUOTA.PROJECT' | translate }}</clr-dg-column>
                <clr-dg-column>{{ 'QUOTA.OWNER' | translate }}</clr-dg-column>
                <clr-dg-column [clrDgSortBy]="'used.storage'">{{
                    'QUOTA.STORAGE' | translate
                }}</clr-dg-column>
                <clr-dg-placeholder>{{
                    'QUOTA.PLACEHOLDER' | translate
                }}</clr-dg-placeholder>
                <clr-dg-row *ngFor="let quota of quotaList" [clrDgItem]="quota">
                    <clr-dg-cell>
                        <a
                            href="javascript:void(0)"
                            (click)="goToLink(quota?.ref?.id)"
                            >{{ quota?.ref?.name }}</a
                        ></clr-dg-cell
                    >
                    <clr-dg-cell>{{ quota?.ref?.owner_name }}</clr-dg-cell>
                    <clr-dg-cell>
                        <div class="progress-block progress-min-width">
                            <div
                                class="progress success"
                                [class.danger]="
                                    quota.hard.storage !== -1
                                        ? quota.used.storage /
                                              quota.hard.storage >
                                          quotaDangerCoefficient
                                        : false
                                "
                                [class.warning]="
                                    quota.hard.storage !== -1
                                        ? quota.used.storage /
                                              quota.hard.storage >=
                                              quotaWarningCoefficient &&
                                          quota.used.storage /
                                              quota.hard.storage <=
                                              quotaDangerCoefficient
                                        : false
                                ">
                                <progress
                                    value="{{
                                        quota.hard.storage === -1
                                            ? 0
                                            : quota.used.storage
                                    }}"
                                    max="{{ quota.hard.storage }}"
                                    data-displayval="100%"></progress>
                            </div>
                            <label class="min-label-width"
                                >{{
                                    quota?.hard?.storage === -1
                                        ? getSuitableUnit(quota?.used?.storage)
                                        : getIntegerAndUnit(
                                              quota?.hard?.storage,
                                              quota?.used?.storage
                                          ).partNumberUsed +
                                          getIntegerAndUnit(
                                              quota?.hard?.storage,
                                              quota?.used?.storage
                                          ).partCharacterUsed
                                }}
                                {{ 'QUOTA.OF' | translate }}
                                {{
                                    (quota?.hard?.storage === -1
                                        ? 'QUOTA.UNLIMITED'
                                        : getIntegerAndUnit(
                                              quota?.hard?.storage,
                                              quota?.used?.storage
                                          ).partNumberHard +
                                          getIntegerAndUnit(
                                              quota?.hard?.storage,
                                              quota?.used?.storage
                                          ).partCharacterHard
                                    ) | translate
                                }}
                            </label>
                        </div>
                    </clr-dg-cell>
                </clr-dg-row>
                <clr-dg-footer>
                    <clr-dg-pagination
                        #pagination
                        [clrDgPageSize]="pageSize"
                        [(clrDgPage)]="currentPage"
                        [clrDgTotalItems]="totalCount">
                        <clr-dg-page-size [clrPageSizeOptions]="[15, 25, 50]">{{
                            'PAGINATION.PAGE_SIZE' | translate
                        }}</clr-dg-page-size>
                        <span *ngIf="totalCount"
                            >{{ pagination.firstItem + 1 }} -
                            {{ pagination.lastItem + 1 }}
                            {{ 'DESTINATION.OF' | translate }}</span
                        >
                        {{ totalCount }} {{ 'SUMMARY.QUOTAS' | translate }}
                    </clr-dg-pagination>
                </clr-dg-footer>
            </clr-datagrid>
        </div>
    </div>
    <edit-project-quotas
        #editProjectQuotas
        (confirmAction)="confirmEdit($event)"></edit-project-quotas>
</div>
